<template>
  <div class="box flex-al al-c">
      <div class="content flex-row al-c">
          <div :class="nav.active?'nav-li active':'nav-li'" v-for="(nav,index) in navList" :key="index+nav">
            {{nav.name}}
          </div>
      </div>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class NavBar extends Vue {
  private navList:Array<object>=[
    {
      name:'首页',
      active:true
    },
    {
      name:'企业档案',
      active:false
    },
    {
      name:'个人档案',
      active:false
    },
    {
      name:'协会活动',
      active:false
    },
    {
      name:'活动中心',
      active:false
    },
    {
      name:'行业公示',
      active:false
    },
    {
      name:'个人中心',
      active:false
    },
  ]
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import '~@/assets/less/flex.less';
@import '~@/assets/less/reset.less';
.box{
    width: 100%;
    height: 56px;
    background: #fff;
    .content{
      height: 100%;
      .nav-li,.active{
        height: 100%;
        padding: 0 30px;
        color:#0050A5;
        white-space: nowrap;
        .flex-al;
        .j-c;
        .al-c;
        .pointer;
        font-size: 16px;
        &:hover{
          background: #0050A5;
           color: #fff;
           .blod;
        }
      }
      .active{
        color: #fff;
        .blod;
        background: #0050A5;
      }
    }
}
</style>
